<template>
  <div id='consultProcess'>
    <div id='entirety' style="background-image: url('/static/background/background.png')">
      <div class='wholeDiv'>
        <el-row :gutter='10' style='min-height: 88vh'>
          <el-col :span='12' v-for='(itemInfo, index) in dataList' :key='itemInfo.id'>
            <el-card class='body-card' style='overflow:auto'>
              <el-row :span='24' style='margin-top: -10px'>
                <el-col :span='23'>
                  <span class='title-name' :title='itemInfo.name'>{{ itemInfo.name }}</span>
                </el-col>
                <el-col :span='1'>
                  <div  @click='toDetail(itemInfo)'>
                  <img src='/static/icon/details.png' style='margin-top: -13px;margin-left: 13px;'>
                  </div>
                </el-col>
              </el-row>
              <el-row :span='24'>
                <el-col :span='10'>
                  <el-row>
                    <div class='clearfix' style='overflow:auto'>
                      <el-row>
                        <el-col :span='6' :offset='18'>
                            <span style='color: rgb(84 112 198);' class='title-name'
                                  :title='itemInfo.jobInfo.duration'>{{ itemInfo.jobInfo.duration }}</span>
                        </el-col>
                      </el-row>
                    </div>
                    <div class='progress'>
                      <div style='height:100%;width:100%;'>
                        <div ref='chart' :id="'chart' + index" style='height: 22vh'></div>
                      </div>
                    </div>
                  </el-row>
                </el-col>
                <el-col :span='14' style='max-height: 22vh;overflow-x: auto;'>
                  <div v-for='(item, index) in itemInfo.graphInfo' :key='item.id'
                       style='padding-left: 10px;padding-right: 10px;'>
                    <el-tooltip effect='light' :content="'进度：' + item.value + '%'" placement='top'>
                      <el-progress :color='getProgressColor(item)'
                                   :text-color='getProgressTextColor(item)' :percentage='item.value'
                                   :status="item.value === 100 ? 'success' : 'exception'"
                                   :text-inside='true'
                                   :format='formatText(item)'
                      >
                      </el-progress>
                    </el-tooltip>
                    <img v-if='checkEnd(itemInfo,index)' class='datecenter-img' src='/static/kt1/jiantou.png'
                         width='25' />
                  </div>
                </el-col>
              </el-row>
              <el-row :span='24' style='margin-top: 10px'>
                <el-col :span='24'>
                  <div class='custom-collapse'>
                    <el-collapse>
                      <el-collapse-item v-for='item in itemInfo.consultInfo' :key='item.id' class='bgbl'>
                        <template slot='title'>
                          <el-row style='width: 100%;height: 100%;'>
                            <el-col :span='4'>
                              <span>{{ item.platformName }}</span>
                            </el-col>
                            <el-col :span='8'>
                              <span>实例：</span>
                              <span>{{ item.instanceCount }}/{{ item.vmQuota }}</span>
                            </el-col>
                            <el-col :span='8'>
                              <span>网络：</span>
                              <span>{{ item.networkCount }}/{{ item.totalNetwork }}</span>
                            </el-col>
                          </el-row>
                        </template>
                        <el-descriptions :column='2' class='bgbl'>
                          <el-descriptions-item label='硬盘'>{{ item.diskCount }}/{{ item.diskNumQuota }}
                          </el-descriptions-item>
                          <el-descriptions-item label='数据盘'>{{ item.dataDiskCount }}/{{ item.diskCapacityQuota }}
                          </el-descriptions-item>
                          <el-descriptions-item label='数据库'>{{ item.databaseCount }}/{{ item.rdsQuota }}
                          </el-descriptions-item>
                          <el-descriptions-item label='中间件'>{{ item.middlewareCount }}/{{ item.totalMiddleware }}
                          </el-descriptions-item>
                        </el-descriptions>
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </el-col>
              </el-row>
              <!--              <el-row>-->
              <!--                <el-col :span='24' style='padding: 5px;'>-->
              <!--                  <el-card class='body-card' style='overflow:auto'>-->
              <!--                    <el-input-->
              <!--                      type='textarea'-->
              <!--                      autosize-->
              <!--                      placeholder='请输入内容'-->
              <!--                      v-model='itemInfo.logInfo.msg'>-->
              <!--                    </el-input>-->
              <!--                  </el-card>-->
              <!--                </el-col>-->
              <!--              </el-row>-->
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script src='./js/index.js'>
</script>
<style lang='scss'>
@font-face {
  font-family: 'Alternate';
  font-style: normal;
  font-width: normal;
}

.wholeDiv {
  .progress {
  }

  .clearfix {
    padding: 5px;
    margin-left: -8%;
    margin-top: -8%;
  }

  .el-collapse-item {
    background: rgba(255, 255, 255, 0) !important;
  }

  .el-collapse-item__header {
    height: 40px;
    line-height: 40px;
    background: rgba(255, 255, 255, 0) !important;
    color: #ffffff;
  }

  .el-collapse-item__content {
    padding-bottom: 25px;
    font-size: 13px;
    color: #eeeeee;
  }

  .el-collapse-item__wrap {
    background-color: transparent;
  }

  .el-descriptions {
    background: rgba(255, 255, 255, 0);
    margin-left: 7%;
  }

  .el-descriptions__body {
    color: #d5d5d5;
    background-color: rgba(255, 255, 255, 0);
    font-size: 10pt;
  }

  .el-descriptions__title {
    color: white;
    font-size: 11pt;
  }

  .el-descriptions-item el-descriptions-item__cell {
    height: 10px;
  }

}

.title-name {
  font-family: 'Alternate';
  color: #FFFFFF;
  letter-spacing: 0;
  text-shadow: 0 0 6px #26A2FF;
  font-size: 10pt;
  display: block;
  max-width: 150px; /* 设置最大宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.body-card {
  margin: 5px;
  height: 44vh;
  border-radius: 4px;
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0);
}

.custom-collapse {
  background-color: rgba(255, 255, 255, 0) !important;
}

.datecenter-img {
  margin-left: 45% !important;
}

.custom-collapse {
  background-color: transparent;
  height: 12.5vh;
  overflow: auto;
}

.el-progress {
  position: relative;
  line-height: 1;
}

.el-progress-bar__outer {
  height: 20px !important;
  background-color: #d3d6de !important;
}


.el-progress-bar__innerText {
  margin-right: 45% !important;
}

</style>
